<template>
    <div class="review" :style="{'margin-left':(width-20)+'px'}">
        <div v-for="i in info" :key="i.id">
            <div class="comment-user">
                <ul>
                    <li><img :src="i.avatar" alt=""></li>
                    <li>{{i.username}}</li>
                    <li>地址</li>
                    <li><span>加关注</span></li>
                    <li><span>发私信</span></li>
                </ul>
            </div>
            <div class="comment-right clearfix">
                <div class="comment-text clearfix">
                   <p>{{i.content}}</p>
                    <span style="float: right;cursor: pointer" @click="del(i.id)">删除</span>
                </div>

                <div class="comment-zan clearfix">
                    <div class="option">
                        <p>1楼 <span><Icon type="ios-timer-outline" class="icon"/>{{i.addtime | formatDate}}</span></p>
                        <!--<span class="option-btn">投诉评论</span>-->
                    </div>
                </div>
                <div class="reply" v-for="(y,k) in i.back">
                    <ul>
                        <li>
                            <img src="../../assets/meirong1.jpg" alt="">
                            <span>{{y.usernameA}}：</span>
                            <p>回复 {{y.usernameB}}：{{y.content}}</p>
                            <span class="time" ><span>{{y.addtime | formatDate}}</span >回复</span>
                            <div style="clear: both"></div>
                        </li>
                    </ul>
                </div>
                <div>
                    <div style="margin-top: 5px" v-if="i.show == 2">
                        <Input v-model="value1" placeholder="Enter something..." style="width: 600px" />
                        <span  @click="fasong(i.id)" style="background-color: #FE5371;color: white;padding: 9px 10px;border-radius: 4px;cursor: pointer">发送</span>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Review",
        props:['info','width'],
        data () {
          return {
              value1:""
          }
        },
        created () {

        },
        filters:{
            formatDate:function(time){
                var date = new Date(time * 1000);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y+M+D+h+m+s;
            },
        },
        component:{
            fasong (id) {
                let  _this = this
                _this.$post('/api/circle/PostEvaluateBack',
                    {
                        token:_this.$token,
                        touser_id:_this.uid,
                        evaluate_id:id,
                        content:_this.value1
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.list.forEach(function (i) {
                            if(i.id == id){
                                i.show = 1
                            }
                        })
                        _this.value1=''
                        _this.$emit("clickSearch",uid);

                    },function (err,errmsg) {
                        _this.$message.error(errmsg);
                    }
                )
            },
            xianshi (id,uid) {
                let _this = this
                _this.tid = uid
                console.log( uid)
                console.log(  _this.list)
                // _this.list.forEach(function (i) {
                //     if(i.id == id){
                //         i.show = 2
                //     }
                // })
            },
            del(id){
                let _this = this
                _this.$post('/api/circle/DelPostOneEvaluate',
                    {
                        evaluate_id:id,
                    },function (res) {
                        _this.$message.success(res.msg);
                        _this.$emit('clickSearch',1)
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style";
  .review{
      margin-left: 30px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px dashed  #FE5371;
      .comment-user{
          width: 121px;
          height: 100%;
          text-align: center;
          float: left;
          ul{
              >:nth-child(3){
                  color: #999999;
                  font-size: 12px;
              }
              >:nth-child(4){
                  margin:15px 0;
              }
              >:first-child{
                  img{
                      border-radius: 50%;
                      width: 94px;
                      height: 94px;
                  }
              }
              li{
                  color: #fe546f;
                  font-size: 15px;
                  margin-bottom: 5px;
                  span{
                      background-color: #FE5371;
                      color: white;
                      padding: 9px 15px;
                      border-radius: 4px;
                  }
              }
          }

      }
      .comment-right{
          width:535px;
          float: right;
          .comment-text{
              font-size: 15px;
              width: 95%;
              padding-bottom: 10px;
              p{
                  width: 75%;
                  float: left;
                  font-weight: bold;
                  color: #333333;
              }
              span{
                  background-color: @theme-color-dark;
                  color: white;
                  padding: 1px 10px;
                  border-radius: 4px;
              }
          }
          .comment-zan{
              padding-bottom: 15px;
              border-bottom:1px  dashed  #cbcbcb ;
              >img{
                  width: 78px;
                  height: 78px;
                  float: left;
                  margin-left: 5px;
              }
              >span{
                  width: 78px;
                  height: 28px;
                  line-height: 28px;
                  display: block;
                  background-color: #fe546f;
                  color: white;
                  font-size: 15px;
                  border-radius: 4px;
                  float: left;
              }
              >p{
                  width: 380px;
                  float: left;
                  padding-left: 180px;
                  line-height:32px;
                  color: #999999;
                  font-size: 12px;
                  span{
                      margin-left: 40px;
                      .icon{
                          font-size: 16px;
                          margin-right: 10px;
                      }
                  }
              }
          }
          .reply{
              padding-top: 5px;
              li{
                  padding-left: 8px;
                  margin-top: 3px;
                  padding-bottom: 2px;
                  padding-top: 2px;
                  background-color: #f5f5f5;
                  >span{
                      color: #fe546f;
                      font-size: 13px;
                      float: left;
                      margin-left: 10px;
                      padding-top: 3px;
                      span{
                          color: #999999;
                      }
                  }
                  img{
                      width: 24px;
                      height: 24px;
                      border-radius: 50%;
                      float: left;
                  }
                  p{
                      width: 330px;
                      float: left;
                      padding-top: 4px;
                      color: #999999;
                  }
                  .time{
                      float: right;
                      margin-right: 25px;
                      span{
                          margin-right: 50px;
                      }
                  }
              }
          }
      }
      .option {
          float: left;
          width:87%;
          margin-left: 50px;
          margin-top: 50px;
          p{
              width: 60%;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 15px;
              letter-spacing: 0px;
              color: #999999;
              float: left;
              padding-top: 15px;
              span{
                  margin-left: 50px;
              }
          }
          .option-btn {
              display: inline-block;
              float:right;
              width: 79px;
              text-align: center;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              border-radius: 4px;
              background-color: #ff5371;
              border-bottom: 2px solid #f4162d;
              color: #fff;
              cursor: pointer;
              margin-left: 30px;
          }
      }
  }
</style>